<template>
  <div ref="tabsContainerRef" class="category-tabs-container">
    <button
      v-for="category in categories"
      :ref="(el) => setTabRef(category.id, el)"
      :key="category.id"
      class="tab-item"
      :class="{ active: activeCategoryId === category.id }"
      @click="selectCategory(category.id)"
    >
      <i v-if="category.id === 'all'" class="ri-function-line"></i>
      <el-icon v-else-if="category.icon" :size="16">
        <component :is="category.icon" />
      </el-icon>
      <span>{{ category.name }}</span>
    </button>
  </div>
</template>

<script setup>
import { ref, watch, onBeforeUpdate, nextTick } from 'vue'

const props = defineProps({
  categories: { type: Array, required: true },
  activeCategoryId: { type: [String, Number], default: null },
})

const emit = defineEmits(['change'])

const tabsContainerRef = ref(null)
const tabRefs = ref({})

const setTabRef = (id, el) => {
  if (el) {
    tabRefs.value[id] = el
  }
}

// Ensure refs are cleared before each update to prevent memory leaks
onBeforeUpdate(() => {
  tabRefs.value = {}
})

const selectCategory = (categoryId) => {
  emit('change', categoryId)
}

watch(
  () => props.activeCategoryId,
  (newId) => {
    nextTick(() => {
      if (newId === null || !tabRefs.value[newId]) return

      const activeTab = tabRefs.value[newId]
      const container = tabsContainerRef.value

      if (activeTab && container) {
        // Center the active tab in the container
        const containerRect = container.getBoundingClientRect()
        const tabRect = activeTab.getBoundingClientRect()
        const scrollLeft =
          container.scrollLeft +
          (tabRect.left - containerRect.left) -
          (containerRect.width - tabRect.width) / 2

        container.scrollTo({
          left: scrollLeft,
          behavior: 'smooth',
        })
      }
    })
  },
  { flush: 'post', immediate: true },
)
</script>

<style lang="scss" scoped>
.category-tabs-container {
  display: flex;
  gap: 0.75rem;
  padding: 0.5rem 0;
  overflow-x: auto;
  white-space: nowrap;
  margin-bottom: 1rem; // Hide scrollbar for a cleaner look
  @include hide-scrollbar;
}

.tab-item {
  padding: 0.5rem 1.25rem;
  cursor: pointer;
  border-radius: 999px;
  transition: all 0.2s ease-in-out;
  font-size: 0.9rem;
  font-weight: 500;

  // 默认状态: 纯白背景，浅灰边框
  background-color: #fff;
  border: 1px solid var(--border-color-light);
  color: var(--text-color-secondary);

  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;

  // 默认状态下的图标颜色继承父级
  i,
  .el-icon {
    font-size: 16px;
    transition: color 0.2s ease-in-out;
  }

  // 悬浮在非激活项上：简约的颜色变化
  &:hover:not(.active) {
    color: var(--primary-color);
    border-color: var(--primary-color);
  }

  // 激活状态：主题色填充，白色文字和图标
  &.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    font-weight: 600;

    // 强制设置激活状态下的图标颜色为白色
    i,
    .el-icon {
      color: #fff;
    }

    // 悬浮在激活项上：背景加深
    &:hover {
      background-color: var(--primary-color-dark);
      border-color: var(--primary-color-dark);
    }
  }
}
</style>
